<template>
  <div class="order-status-pie-wrapper" :class="theme">
    <div v-if="loading" class="pie-skeleton animate-pulse">
      <div class="pie-skeleton-circle"></div>
    </div>
    <v-chart
      v-else
      ref="chartRef"
      class="pie-chart"
      :option="pieOption"
      :theme="theme"
      autoresize
    />
  </div>
</template>

<script setup>
import { ref, watchEffect, onMounted, onBeforeUnmount } from 'vue'
import VChart from 'vue-echarts'

const props = defineProps({
  data: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  theme: { type: String, default: 'light' } // 'light' | 'dark'
})

const chartRef = ref(null)

const pieOption = ref({})

const getGradient = (idx, theme) => {
  // 预设渐变色组
  const gradients = theme === 'dark' ? [
    ['#4f8cff', '#1e2a78'],
    ['#34e89e', '#0f3443'],
    ['#f7971e', '#ffd200'],
    ['#f857a6', '#ff5858'],
    ['#43cea2', '#185a9d'],
    ['#ff512f', '#dd2476']
  ] : [
    ['#4f8cff', '#a6c1ee'],
    ['#43e97b', '#38f9d7'],
    ['#f7971e', '#ffd200'],
    ['#f857a6', '#ff5858'],
    ['#43cea2', '#185a9d'],
    ['#ff512f', '#f09819']
  ]
  return {
    type: 'linear',
    x: 0, y: 0, x2: 1, y2: 1,
    colorStops: [
      { offset: 0, color: gradients[idx % gradients.length][0] },
      { offset: 1, color: gradients[idx % gradients.length][1] }
    ]
  }
}

watchEffect(() => {
  if (!props.data || props.data.length === 0) return
  pieOption.value = {
    tooltip: {
      trigger: 'item',
      backgroundColor: props.theme === 'dark' ? '#222' : '#fff',
      textStyle: { color: props.theme === 'dark' ? '#eee' : '#333' }
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      textStyle: {
        color: props.theme === 'dark' ? '#eee' : '#333'
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 12,
          shadowBlur: 20,
          shadowColor: props.theme === 'dark' ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.15)'
        },
        label: {
          show: true,
          position: 'outside',
          color: props.theme === 'dark' ? '#eee' : '#333',
          formatter: '{b}\n{d}%'
        },
        labelLine: {
          show: true,
          length: 18,
          length2: 12,
          lineStyle: {
            color: props.theme === 'dark' ? '#eee' : '#333',
            width: 2
          }
        },
        data: props.data.map((item, idx) => ({
          value: item.count,
          name: item.status,
          itemStyle: {
            color: getGradient(idx, props.theme)
          }
        })),
        emphasis: {
          scale: true,
          scaleSize: 12,
          itemStyle: {
            shadowBlur: 40,
            shadowColor: props.theme === 'dark' ? 'rgba(0,0,0,0.9)' : 'rgba(0,0,0,0.25)'
          }
        },
        animation: true,
        animationEasing: 'cubicOut',
        animationDuration: 1200
      }
    ]
  }
})

// 响应式布局：监听窗口resize
let resizeHandler = null
onMounted(() => {
  resizeHandler = () => chartRef.value && chartRef.value.resize()
  window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})
</script>

<style scoped>
.order-status-pie-wrapper {
  width: 100%;
  min-height: 320px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pie-chart {
  width: 100%;
  height: 320px;
  max-height: 500px;
  min-height: 240px;
  transition: background 0.3s;
}
.pie-skeleton {
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-bg-color, #f5f7fa);
  border-radius: 24px;
}
.pie-skeleton-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e0e0 40%, #f5f5f5 100%);
}
/* 深色模式下的样式 */
.order-status-pie-wrapper.dark {
  background: #181818;
}
:deep(.echarts){
  background: transparent !important;
}
:deep(.echarts-legend){
  color: inherit !important;
}
</style> 